<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <div class="users_main_head">
        <el-form-item>
          <el-input
            class="users_main_head_search"
            v-model="formInline.user"
            placeholder="根据用户名搜索"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm">清空</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button
            type="success"
            class="newElement"
            @click="openDrawer('add')"
            >新增用户</el-button
          >
        </el-form-item>
      </div>
      <div class="uesrs_main_statistics">共{{ counts }}条记录</div>
      <el-table ref="table" :data="tableData" style="width: 100%">
        <el-table-column
      type="selection"
      width="300">
    </el-table-column>
        <el-table-column prop="title" label="用户名" width="300">
        </el-table-column>
        <el-table-column prop="create_date" label="日期" width="550">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-row>
            <el-button @click="openDrawer('edit', row.id)" type="primary" icon="el-icon-edit" circle></el-button>
             <el-button  @click="delDrawer(row.id)" type="danger" icon="el-icon-delete" circle></el-button>
             </el-row>
            <!-- <i class="el-icon-edit" @click="openDrawer('edit', row.id)"></i>
            <i class="el-icon-delete" @click="delDrawer(row.id)"></i> -->
          </template>
        </el-table-column>
      </el-table>
 <!-- 分页 -->
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="+counts"
      >
      </el-pagination>
    </el-form>

    <!-- 弹出框 -->
    <PermissionsAdd @newDataes='newDataes' @handleCloseModal='handleCloseModal' ref="popUp"  :ruleInline='ruleInline' ></PermissionsAdd>
  </div>
</template>

<script>
import moment from 'moment'
import PermissionsAdd from '@/module-manage/components/permissions-add'
// import PageTool from '@/module-manage/components/page-tool'
import { list, remove } from '@/api/base/permissions.js'
export default {
  components: {
    PermissionsAdd
    // PageTool
  },
  data () {
    return {
      type: '',
      text: '',
      formInline: {
        user: ''
      },
      counts: '',
      query: {
        page: 1,
        pagesize: 10
      },
      tableData: [],
      ruleInline: {
        title: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
      }
    }
  },

  async created () {
    this.initData()
  },

  methods: {
    async initData () {
      const { data } = await list(this.query)
      this.counts = data.counts
      this.tableData = data.list
      this.tableData.forEach(item => {
        item.create_date = moment(item.create_date).format('YYYY-MM-DD HH:mm:ss')
      })
      console.log(data)
      console.log(this.tableData)
    },
    // 清空
    resetForm () {
      this.formInline.user = ''
      this.initData()
    },
    // 搜索
    async onSubmit () {
      const { data } = await list({ page: this.query.page, pagesize: this.query.pagesize, title: this.formInline.user })
      // this.tableData = this.tableData.filter(item => item.title.includes(this.formInline.user))
      this.tableData = data.list
      this.counts = data.counts
      this.tableData.forEach(item => {
        item.create_date = moment(item.create_date).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    // 添加或者修改
    openDrawer (value, id) {
      this.type = value
      this.$refs.popUp.dialogFormV()
      if (value === 'add') {
        this.text = '创建权限组'
      }
      if (value === 'edit') {
        this.text = '编辑权限组'
        this.tableData.forEach(item => {
          if (item.id === id) {
            this.$refs.popUp.hanldeEditForm(id)
          }
        })
      }
    },
    // 分页
    handleSizeChange (val) {
      this.query.pagesize = val
      this.query.page = 1
      this.initData()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.initData()
    },
    // 提交关闭弹窗
    handleCloseModal () {
      this.$refs.popUp.dialogFormH()
    },
    newDataes () {
      this.initData()
      this.$refs.popUp.handleResetForm()
    },
    // 删除按钮
    async delDrawer (id) {
      this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data } = await remove({ id })
        console.log(data)
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped lang='less'>

.demo-form-inline {
  width: 1300px;
  height: 585px;
  padding: 0 20px;
  background-color: #fff;
  margin: 20px;}
  .el-icon-edit {
  width: 35px;
  height: 35px;
  padding: 10px;
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  border-radius: 50%;
}
.el-icon-delete {
  width: 35px;
  height: 35px;
  padding: 10px;
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  border-radius: 50%;
  margin-left: 10px;
}
.users_main_head {
    width: 100%;
    padding: 20px 0;
  }
  /deep/.users_main_head_search {
  width: 200px !important;
  height: 32px;
}
.newElement {
  margin-left: 787px;
}

// 分页
.el-pagination {
  margin-left: 610px;
  margin-top: 20px;
}
.uesrs_main_statistics {
  font-size: 13px;
  background-color: #f4f4f5;
  color: #909399;
  padding: 10px 20px;
}
</style>
